<template>
<div>
	<div>
		<h1 style="margin-bottom: 0;"></h1>
	</div>
		<div>
			<div id="header" class="">
				<h1 id=""><a href="" id="bt">RUNOOB.COM</a></h1>			
				<input type="text" name="" id="srk" value="HTML" />
			</div>
			<div id="">
				<table width="100%" bgcolor="#96B97D" align="center" cellpadding="10px">
						<tr>
							<td><a href="#">首页</a></td>
							<td><a href="#">HTML</a></td>
							<td><a href="#">CSS</a></td>
							<td><a href="#">JAASCRIPT</a></td>
							<td><a href="#">VUEBOOTSTRAP</a></td>
							<td><a href="#">JAA</a></td>
							<td><a href="#">JS</a></td>
							<td><a href="#">VUE</a></td>
							<td><a href="#">CCH+CGOSQL</a></td>
							<td><a href="#">PYTHON2</a></td>
							<td><a href="#">PYTHON3</a></td>
							<td><a href="#">php</a></td>
							<td><a href="#">NOOEJS</a></td>
							<td><a href="#">SQL</a></td>
							<td><a href="#">CCH+CGOSQL</a></td>
							<td><a href="#">LNUX</a></td>
							<td><a href="#">JOUERY</a></td>
							<td><a href="#">本地签</a></td>
						</tr>
				</table>
			</div>
			
			<div id="main" class="">
				<div id="left">
						<ul >
							<li v-for="value,index in mue1">
							{{value}}
							</li>
						</ul>
				</div>
				<div id="center">
					<h3>&nbsp;&nbsp;&nbsp;192407122  利月洁</h3>
					<iframe src="https://www.runoob.com/html/html-iframes.html" width="100%" height="100%" frameborder="1" marginheight="0" marginwidth="0"></iframe>
				</div>
				<div id="right">
					<ul>
						<li v-for="value,index in mue2">
							{{value}}
						</li>
					</ul>
				</div>
			</div>
		</div>
</div>
</template>

<script>
	export default {
	  name: 'shiyan2',
	  props: {
		msg: String
	  },
	  data () {
	        return {
			  mue1:["HTML简介",'HTML教程','HTML编辑器','HTML基础','HTML标题','HTML段落','HTML文本格式化','HTML链接','HTML头部','HTML表格','”HTML列表','XHTML简介','HTML布局',],
			  mue2:["分类导航",'HTML/css','JavaScript','服务端','数据库','数据分析','移动端','XML教程','ASP.NET','Web Service','开发工具','网站建设','Advertisement'],
	        }
	      },
	}
</script>

<style>
	#header{background-color: white;width:100%;text-align: center;}
	#main{width:100%%;height: 100%px;background-color: #999999;}
	#left{width: 15%;height:1010px;float: left;background-color:#f2ffe5;}
	#center{width: 70%;height: 1010px;float: left;background-color: white;}
	#right{width: 15%;height: 1010px;float:right;background-color: #f2ffe5;}
	#srk{width: 300px;height: 30px;float:right; margin: 5px 100px 30px 0px;}
	#bt{width: 300px;height: 30px;float:left;margin: 0px 100px 30px 0px; color: #64854c;text-decoration: none;}
	a{text-decoration: none;}
	ul{List-style:none;}
	li{margin:30px 0px;}
</style>
